<template>
  <div class="employee-container">
    <!-- 搜索和新增 -->
    <div class="operation-panel">
      <div class="buttons">
        <el-button type="primary" @click="handleAdd" class="left-button">添加员工</el-button>
        <div class="right-buttons">
          <el-button type="warning" @click="showImportDialog = true" class="import-btn">导入员工</el-button>
          <el-button type="success" @click="exportEmployees" :loading="exportLoading" class="export-btn">导出员工
          </el-button>
        </div>
      </div>
      <div class="search-box" style="display: flex">
        <!-- 下拉框赛选公司 -->
        <el-select
            v-model="searchCompanyId"
            placeholder="选择公司"
            clearable
            filterable
            style="width: 200px; margin-right: 10px;"
            @change="handleSearch"
        >
          <el-option
              v-for="company in companyOptions"
              :key="company.id"
              :label="company.name"
              :value="company.id"
          ></el-option>
        </el-select>
        <!-- 搜索员工名字 -->
        <el-input
            v-model="searchKeyword"
            placeholder="请输入员工姓名"
            clearable
            @clear="handleSearch"
            @keyup.enter.native="handleSearch"

        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
        v-loading="loading"
        :data="employeeList"
        border
        stripe
        style="width: 100%"
        height="calc(100vh - 220px)"
    >
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="员工姓名" min-width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80" align="center"></el-table-column>
      <el-table-column prop="employmentDate" label="入职日期" width="140" align="center">
        <template slot-scope="scope">
          {{ formatDate(scope.row.employmentDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="employed" label="在职状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.employed ? 'success' : 'danger'">
            {{ scope.row.employed ? '在职' : '离职' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="所属公司" min-width="180"></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
      ></el-pagination>
    </div>

    <!-- 添加/编辑对话框 -->
    <EmployeeForm
        v-model="dialogVisible"
        :title="dialogTitle"
        :formData="formData"
        :companyOptions="companyOptions"
        @submit="handleFormSubmit"
        @reset="resetFormData"
    />
    <!--导入员工-->
    <EmployeeImport
        v-model="showImportDialog"
        @importSuccess="handleImportSuccess"
    />
  </div>
</template>

<script>
import Handler from './Employee.js'

export default Handler
</script>

<style scoped lang="scss">
@import './Employee.scss';
</style>
